<template>
  <div class="left">
      <div class="people">
          <span>乘机人</span>
          <div class="msg">
              <div>
                <div style="font-size:30px;font-weight: 900;color:#808080">1</div>
                <el-input placeholder="请输入乘机人姓名" style="width:550px;height:30px;margin-top:10px;" v-model="name1"></el-input>
                <div style="margin-top:20px;">
                    <el-dropdown split-button >
                        身份证
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>护照</el-dropdown-item>
                            <el-dropdown-item>军官证</el-dropdown-item>
                            <el-dropdown-item>士兵证</el-dropdown-item>
                            <el-dropdown-item>台胞证</el-dropdown-item>
                            <el-dropdown-item>回乡证</el-dropdown-item>
                            <el-dropdown-item>其他</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-input placeholder="请填写证件号码" style="width:434px;height:30px;" v-model="card1" @blur="sfcard1"></el-input>
                </div>
                <el-input placeholder="请填写手机号码" style="width:550px;height:30px;margin-top:10px;" v-model="phone1" @blur="peoplee1"></el-input>
              </div>
              <div style="margin-top:20px;" v-show="btn1">
                  <el-button style="background-color:#41c1ec;color:white" @click="add">添加乘机人</el-button>    
              </div>
              <div v-show="people2">
                <div style="font-size:30px;font-weight: 900;color:#808080;margin-top:50px;">2</div>
                <el-input placeholder="请输入乘机人姓名" style="width:550px;height:30px;margin-top:20px;" v-model="name2"></el-input>
                <div style="margin-top:20px;">
                    <el-dropdown split-button >
                        身份证
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>护照</el-dropdown-item>
                            <el-dropdown-item>军官证</el-dropdown-item>
                            <el-dropdown-item>士兵证</el-dropdown-item>
                            <el-dropdown-item>台胞证</el-dropdown-item>
                            <el-dropdown-item>回乡证</el-dropdown-item>
                            <el-dropdown-item>其他</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-input placeholder="请填写证件号码" style="width:434px;height:30px;" v-model="card2" @blur="sfcard2"></el-input>
                </div>
                <el-input placeholder="请填写手机号码" style="width:550px;height:30px;margin-top:10px;" v-model="phone2" @blur="peoplee2"></el-input>
              </div>
              <div style="margin-top:20px;" v-show="btn2">
                  <el-button style="background-color:#41c1ec;color:white" @click="add2">添加乘机人</el-button>    
              </div>
              <div v-show="people3">
                <div style="font-size:30px;font-weight: 900;color:#808080;margin-top:50px;">3</div>
                <el-input placeholder="请输入乘机人姓名" style="width:550px;height:30px;margin-top:20px;" v-model="name3"></el-input>
                <div style="margin-top:20px;">
                    <el-dropdown split-button >
                        身份证
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>护照</el-dropdown-item>
                            <el-dropdown-item>军官证</el-dropdown-item>
                            <el-dropdown-item>士兵证</el-dropdown-item>
                            <el-dropdown-item>台胞证</el-dropdown-item>
                            <el-dropdown-item>回乡证</el-dropdown-item>
                            <el-dropdown-item>其他</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-input placeholder="请填写证件号码" style="width:434px;height:30px;" v-model="card3" @blur="sfcard3"></el-input>
                </div>
                <el-input placeholder="请填写手机号码" style="width:550px;height:30px;margin-top:10px;" v-model="phone3" @blur="peoplee3"></el-input>
              </div>
              <div style="margin-top:20px;" v-show="btn3">
                  <el-button style="background-color:#41c1ec;color:white" @click="add3">添加乘机人</el-button>    
              </div>
          </div>
          <div class="phone">
              <div>
                <span>联系人</span>
              </div>
              <div class="pop">
                <el-input placeholder="请填写联系人姓名" style="width:550px;height:30px;margin-top:10px;" v-model="lxname"></el-input>
                <el-input placeholder="请填写联系人手机号码" style="width:550px;height:30px;margin-top:20px;" v-model="lxphone"></el-input>
                <el-input placeholder="请填写联系人邮箱" style="width:550px;height:30px;margin-top:20px;" v-model="lxemail"></el-input>
              </div>
          </div>
          <el-button class="btn" @click="go">提交</el-button>
      </div>
  </div>
</template>

<script>
export default {
    name:"left",
    data(){
        return{
            people2:false,
            people3:false,
            btn1:true,
            btn2:false,
            btn3:false,
            name1:"",
            card1:"",
            phone1:"",
            name2:"",
            card2:"",
            phone2:"",
            name3:"",
            card3:"",
            phone3:"",
            lxname:"",
            lxphone:"",
            lxemail:""
        }
    },
    methods:{
        open(msg){
            this.$message({
            message: `${msg}`,
            type: 'warning',
            offset:100
            });
        },
        add(){
            this.people2=true
            this.btn1=false
            this.btn2=true
        },
        add2(){
            this.people3=true
            this.btn2=false
            this.btn3=true
        },
        add3(){
            this.open('最多只能添加3位乘机人')
        },
        peoplee1(){
            this.$store.commit("num",1)
        },
        peoplee2(){
            this.$store.commit("num",2)
        },
        peoplee3(){
            this.$store.commit("num",3)
        },
        reg(card){
            var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
            if(!idcardReg.test(card)){
                this.open('填写的身份证号码不正确')
                return
            }
        },
        sfcard1(){
            this.reg(this.card1)
        },
        sfcard2(){
            this.reg(this.card2)
        },
        sfcard3(){
            this.reg(this.card3)
        },
        go(){
           if(this.phone1==''||this.name1=='' || this.phone1==''){
            this.$message({
                showClose: true,
                message: '请先填写真实资料',
                type: 'error'   
                });
           }else{
               this.$message({
                showClose: true,
                message: '订单生成，请到App中下单或个人中心查看！',
                type: 'success'   
                });
           }
        }
    },
}
</script>

<style lang="scss" scoped>
.left{
    width: 100%;
    // background-color: aliceblue;
    // height: 1000px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top:20px ;
    border: 1px solid #ddd;
    border-radius: 5px ;
    .people{
        span:first-child{
            font-size: 20px;
            color: #808080;
            font-weight: 900;
        }
        .msg{
            margin-top: 30px;
            margin-left: 20px;
            width: 740px;
            // background-color: antiquewhite;
        }
        .btn{
            width: 550px;
            margin-top: 20px;
            margin-left: 20px;
            background-color: #41c1ec;
            color: white;
            margin-bottom: 30px;
        }
    }
    .phone{
        padding-top: 20px;
        span:first-child{
            font-size: 20px;
            color: #808080;
            font-weight: 900;
        }
        .pop{
            margin-top: 30px;
            margin-left: 20px;
        }
    }
}
</style>